<template>
  <div class="detail-params-box" v-if="Object.keys(paramsInfo).length !== 0">
    <table
      v-for="(table, index) in paramsInfo.rule.tables"
      :key="index"
      class="info-size"
    >
      <tr v-for="(tr, index_tr) in table" :key="index_tr">
        <td v-for="(td, index_td) in tr" :key="index_td">{{ td }}</td>
      </tr>
    </table>

    <table class="set_info">
      <tr v-for="(item, index) in paramsInfo.info.set" :key="index">
        <td class="td_key">{{ item.key }}</td>
        <td class="td_value">{{ item.value }}</td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  name: "DetailParamsInfo",
  props: {
    paramsInfo: {
      type: Object,
      default() {
        return {};
      },
    },
  },
};
</script>

<style scoped>
.detail-params-box {
  font-size: 14px;
}
.info-size {
  width: 100%;
}
.info-size tr {
  display: flex;
  justify-content: space-between;
  padding: 12px 10px;
  text-align: center;
  border-bottom: 2px solid #fafafa;
}
.info-size tr td {
  flex: 1;
}
.set_info {
  width: 100%;
}
.set_info tr {
  text-align: left;
  display: flex;
  text-align: center;
  padding: 12px 20px;
  border-bottom: 2px solid #fafafa;
}
.set_info tr td.td_key {
  flex: 2;
}
.set_info tr td.td_value {
  flex: 8;
  text-align: left;
  margin-left: 69px;
  color: var(--color-high-text);
}
</style>